<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        width: 960px;
        margin: 0 auto;
    }
    .layout-logo{
        width: 100px;
        height: 30px;
        background: #3566c7;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-header{
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(18, 91, 175, 0.1);
    }
    .layout-body{
      padding: 20px;
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-ceiling{
        background: #24418a;
        padding: 10px 0;
        overflow: hidden;
    }
    .layout-ceiling-main{
        float: left;
        margin-left: 15px;
        color: #ffffff;
        font-weight: bold;
    }
    .layout-ceiling-main a{
        color: #d1d6db;
    }
</style>
<template>
    <div class="layout">
        <div class="layout-ceiling">
            <div class="layout-ceiling-main">
                国密在线加解密工具
            </div>
        </div>
        <div class="layout-header">
        <ElCard>这是一组加解密的工具，方便工程师使用国密加解密算法

        </ElCard>

        </div>
        <div class="layout-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="SM2" name="first">
                <Sm2Tool></Sm2Tool>
              </el-tab-pane>
              <el-tab-pane label="SM3" name="second"><Sm3Tool></Sm3Tool></el-tab-pane>
              <el-tab-pane label="SM4" name="third"><Sm4Tool></Sm4Tool></el-tab-pane>
            </el-tabs>
        </div>
        <div class="layout-copy">

        </div>
    </div>
</template>
<script>
import Sm2Tool from '@/components/Sm2Tool'
import Sm3Tool from '@/components/Sm3Tool'
import Sm4Tool from '@/components/Sm4Tool'
export default {
  components: { Sm2Tool, Sm3Tool, Sm4Tool },
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
